import { getCodeApi } from "@/api/lot.js";
import { Notify } from "vant";
import { validateName } from "@/tools/Validate";
import { encrypt_fun } from "@/tools/aesUtil.js";
import { setLocalStorage } from "@/tools/index.js";
import lot from "@/tools/const.js";
export default {
  name: "login",
  components: {},
  data() {
    return {
      captcha: {
        position:"absolute",
        right:"0",
        bottom: "2.9rem",
        height: "1.3rem",
        width: "2.5rem",
      },
      other: {
        position: "absolute",
        left: "-5rem",
        top: "-5rem",
        borderRadius: "50%",
        width:"8rem",
        height:"8rem",
        background: "#fff",
        opacity: .1,
      },
      bg: {
        // backgroundImage: "url(" + require("@/assets/images/loginBg.png") + ")",
        // backgroundRepeat: "no-repeat",
        // backgroundSize: "cover",
        background: "#4284DB", /* fallback for old browsers */
        background: "-webkit-linear-gradient(to bottom, #0080fb, #00fbac)",  /* Chrome 10-25, Safari 5.1-6 */
        background: "linear-gradient(to bottom, #0080fb, #00fbac)", /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

      },
      verificationCode: "",
      loginForm: {
        username: "admin",
        password: "aoto@123",
        validate: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: validateName, trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        validate: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    window.localStorage.clear();
    this.getcodeImg();
    //回车提交
    let _self = this;
    document.onkeydown = function() {
      let key = window.event.keyCode;
      if (key == 13 || key == 100) {
        _self.loginApi();
      }
    };
  },
  mounted() {},
  methods: {
    loginApi() {
      let data = {
        username: encrypt_fun(this.loginForm.username),
        password: encrypt_fun(this.loginForm.password),
        validate: this.loginForm.validate,
      };
      this.$store.dispatch("Login/login", data).then((res) => {
        console.info(JSON.stringify(res));
        this.loading = false;
        if (res.status === 200) {
          this.localSocket();
          setLocalStorage("loginInfo", res.obj);

          this.$router.push({ name: "index" });
        } else if (res.status === 666) {
          this.changePassword();
        } else {
          this.getcodeImg();
          Notify({ type: "danger", message: res.msg });
        }
      });
    },
    localSocket() {
      let that = this;
      let arr = lot.baseUrl.split("//");
      let base =
        process.env.NODE_ENV === "production"
          ? "ws://" + arr[1] + ":8080/websocket"
          : "ws://" + arr[1] + ":8080/websocket";
      if ("WebSocket" in window) {
        console.log("您的浏览器支持 WebSocket!");
        that.ws = new WebSocket(base);
        that.$global.setWs(that.ws);
        that.ws.onopen = function() {
          console.log("websocket连接成功");
        };
        that.ws.onclose = function() {
          // 关闭 websocket
          console.log("连接已关闭...");
          setTimeout(() => {
            that.localSocket();
          }, 60000);
        };
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
    },
    // 登录
    onSubmit(values) {
      this.loginApi();
    },
    //获取验证码
    getcodeImg() {
      getCodeApi().then((res) => {
        console.log("获取验证码" + JSON.stringify(res));
        this.verificationCode = URL.createObjectURL(res);
      });
    },
  },
};
